<template>
  <div class="my-calendar">
    <div class="calendar-header">
      <button @click="prevMonth" class="nav-button">◀</button>
      <span class="current-month gradient-text">
        {{ currentYear }}-{{ currentMonth.toString().padStart(2, '0') }}
      </span>
      <button @click="nextMonth" class="nav-button">▶</button>
    </div>

    <div class="calendar-body">
      <!-- 星期标题 -->
      <div class="week-days">
        <div class="week-day" v-for="(day, index) in weekDays" :key="index">
          {{ day }}
        </div>
      </div>
      <!-- 日历网格 -->
      <div class="days-grid">
        <div
            v-for="(cell, index) in days"
            :key="index"
            class="day-cell"
            :class="{ empty: !cell.date, weekend: cell.date && (cell.date.getDay() === 0 || cell.date.getDay() === 6) }"
            @click="cell.date && openDetails(cell)"
        >
          <div class="day-info">
            <span class="day-number">{{ cell.date ? cell.date.getDate() : '' }}</span>
            <span class="day-total" v-if="cell.topInfo">
              {{ formatCurrency(cell.topInfo) }}
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed, watch } from 'vue';
export default {
  name: "MyCalendar",
  props: {
    formatter: {
      type: Function,
      default: (day) => day,
    },
    initialYear: {
      type: Number,
      default: new Date().getFullYear(),
    },
    initialMonth: {
      type: Number,
      default: new Date().getMonth() + 1,
    },
  },
  setup(props, { emit }) {
    const currentYear = ref(props.initialYear);
    const currentMonth = ref(props.initialMonth);
    const weekDays = ['一', '二', '三', '四', '五', '六', '日'];

    const days = computed(() => {
      const result = [];
      const firstDay = new Date(currentYear.value, currentMonth.value - 1, 1);
      const emptyCells = (firstDay.getDay() + 6) % 7;
      const daysInMonth = new Date(currentYear.value, currentMonth.value, 0).getDate();
      const totalCells = 42;

      for (let i = 0; i < emptyCells; i++) {
        result.push({ date: null, topInfo: '' });
      }
      for (let dayNum = 1; dayNum <= daysInMonth; dayNum++) {
        const dateObj = new Date(currentYear.value, currentMonth.value - 1, dayNum);
        let dayItem = { date: dateObj, topInfo: '' };
        dayItem = props.formatter({ ...dayItem });
        result.push(dayItem);
      }
      while (result.length < totalCells) {
        result.push({ date: null, topInfo: '' });
      }
      return result;
    });

    const prevMonth = () => {
      if (currentMonth.value === 1) {
        currentYear.value--;
        currentMonth.value = 12;
      } else {
        currentMonth.value--;
      }
      // 通知父组件月份已改变
      emit('monthChanged', { year: currentYear.value, month: currentMonth.value });
    };

    const nextMonth = () => {
      if (currentMonth.value === 12) {
        currentYear.value++;
        currentMonth.value = 1;
      } else {
        currentMonth.value++;
      }
      // 通知父组件月份已改变
      emit('monthChanged', { year: currentYear.value, month: currentMonth.value });
    };

    watch(() => [props.initialYear, props.initialMonth], ([newYear, newMonth]) => {
      currentYear.value = newYear;
      currentMonth.value = newMonth;
    });

    const formatCurrency = (value) => {
      return Number(value).toFixed(2);
    };

    // 点击日期单元格通知父组件选中该日期
    const openDetails = (cell) => {
      emit('daySelected', cell.date);
    };

    return {
      currentYear,
      currentMonth,
      weekDays,
      days,
      prevMonth,
      nextMonth,
      formatCurrency,
      openDetails,
    };
  },
};
</script>

<style scoped>
.my-calendar {
  width: 100%;
}

/* 日历头部 */
.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  font-size: 16px;
  padding: 5px 0;
}
.nav-button {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  padding: 5px;
  color: var(--primary-color, #FF7E92);
  transition: color 0.2s ease;
}
.nav-button:hover {
  color: #2980b9;
}
.current-month {
  font-weight: 700;
}

/* 星期标题 */
.week-days {
  display: flex;
  border-bottom: 1px solid #eee;
}
.week-day {
  flex: 1;
  text-align: center;
  padding: 8px 0;
  font-weight: 700;
  border-bottom: 1px solid #eee;
  color: var(--text-color, #2c3e50);
}

/* 日历网格 */
.days-grid {
  display: flex;
  flex-wrap: wrap;
}
.day-cell {
  width: calc(100% / 7);
  height: 60px;
  border: 1px solid #f0f0f0;
  box-sizing: border-box;
  padding: 5px;
  position: relative;
  cursor: pointer;
}
.day-cell.empty {
  background-color: #fafafa;
  cursor: default;
}
.day-cell.weekend {
  background-color: #f9f9f9;
}
.day-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
.day-number {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-color, #2c3e50);
}
.day-total {
  font-size: 12px;
  font-weight: 400;
  color: #34495e;
  text-align: right;
}

/* 响应式 */
@media (max-width: 400px) {
  .day-cell {
    height: 50px;
  }
  .day-number {
    font-size: 12px;
  }
  .day-total {
    font-size: 10px;
  }
  .nav-button {
    font-size: 12px;
  }
}
</style>